<template>
<div class="page">
  <navTop title="搜索"></navTop>
	<div class="list">
		<div class="h10"></div>
		<div class="ss_div flex_ac">
			<input class="ss_input" v-model="keywords"  placeholder="请输入关键字" @focus="isFocus = true" />
			<div class="ss_btn flex_ac flex_center" @click="search">
        <van-icon name="search" size="28" color="#fff"/>
			</div>
		</div>
		<div class="h30"></div>
		
		<div class="swiper_div" v-if="!isFocus && !keywords">
      <div class="main_div">
        <div class="s_top flex_ac">
          <img class="s_top_img" src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/qj_ss_bg1.png" mode=""></img>
          <div class="s_top_ddd flex_ac">
            <img class="s_top_icon" src="~@/assets/img/ss_icon.png" mode=""></img>
            推荐查询
          </div>
        </div>
        
        <div class="">
          <div class="flex_ac" v-for="i,k in list1" :key="k" @click="toPage(i.url)">
            <div class="rank_div" v-if="k<3">
              <img :src="k==0?img1:k==1?img2:img3" mode=""></img>
            </div>
            <div class="rank_div" v-else>
              {{k+1}}
            </div>
            <div class="rank_name">{{i.name}}</div>
          </div>
        </div>
      </div>
		</div>
		
		<div class="ss_ddd" v-if="isFocus" @click="isFocus = false">
			<div class="flex_sb">
				<div class="ss_text">历史搜索</div>
        <van-icon name="delete-o" size="26" color="#666666" @click="clearLs"/>
			</div>
			<div class="h20"></div>
			<div class="flex_w">
				<div class="ls_item" v-for="i,k in lsList" :key="k" @click="ssLs(i)">
					{{i}}
				</div>
			</div>
		</div>
		
		<div class="jg_type flex"  v-if="!isFocus && keywords">
			<div class="type_item" :class="type_id==i.id?'type_item_a':''"
				 v-for="i,k in typeList" :key="k"
				 @click="type_id=i.id"> {{i.name}} </div>
      </div>
      <div class="jg_type ml0 pt10" v-if="!isFocus && keywords&&type_id!='chain'">
        <Shaixuan :isCity="true" :isChain="true" @changeInit="changeInit"></Shaixuan>
      </div>
 
      <van-list
        v-if="!isFocus && keywords" class="jg_div" :class="type_id=='chain'?'':'jg_div1'"   ref="gun"
        v-model="isLoad"
        :finished="isfinish"
        finished-text="没有更多了"
        @load="getMore"
        >
        <div class="flex_sb flex_ac">
          <div class="total">
            为您找到 <span style="color: #FA871E;">{{total}}</span> 个相关 {{type_id=='chain'?'产业链':type_id=='company'?'企业':type_id=='project'?'项目':type_id=='data'?'数据':'园区'}}
            <span style="color:#333" v-if="type_id=='chain'" @click="type_id = 'company'">,<span style="color: #FA871E;">{{total_com>10000?'10000+':total_com }}</span>个企业 </span>
          </div>
        </div>
        <chainList v-if="type_id=='chain'" :list="list"></chainList>
        <companyList v-if="type_id=='company'" :list="list"></companyList>
        <projectList v-if="type_id=='project'" :list="list"></projectList>
        <parkList v-if="type_id=='park'" :list="list"></parkList>

			<div class="btn_btn" v-if="type_id=='chain'&&list.total==0" @click="toPage('huiyuanSq')">
				立即定制
			</div>
		</van-list>
	</div>
</div>
</template>

<script>
	let img1 = 'http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/qj_rankl1.png'
	let img2 = 'http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/qj_rankl2.png'
	let img3 = 'http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/qj_rankl3.png'
	import { GetChainLevelList,company,park,project } from '@/api/api'
	import Shaixuan from '@/components/Shaixuan.vue'
	import navTop from '@/components/navTop.vue'
  import chainList from '@/components/ssList/chainList.vue'
  import companyList from '@/components/ssList/companyList.vue'
  import projectList from '@/components/ssList/projectList.vue'
  import parkList from '@/components/ssList/parkList.vue'
	export default {
		components:{
      Shaixuan,
      navTop,
      chainList,
      companyList,
      projectList,
      parkList
		},
		data() {
			return {
				isFocus:false,
				img1,
				img2,
				img3,
				keywords:"",
				list1:[
					{name:'查产业链',url:'chainList'},
					{name:'查企业',url:'companyList'},
					{name:'查乡贤',url:'xiangxian'},
					{name:'招商载体',url:'parkList'},
					{name:'招商动态',url:'newsList'},
					{name:'项目',url:'projectList'},
          {name:'供应需求',url:'gongxuList' },
					// {name:'企业尽调',url:'jdReport'},
				],
				
				lsList:sessionStorage.lsList?JSON.parse(sessionStorage.lsList):[],
				
				typeList:[
					{name:'产业链',id:'chain'},
					{name:'企业',id:'company'},
					{name:'项目',id:'project'},
					{name:'招商载体',id:'park'},
				],
				type_id:'chain',
				
				list:[],
				total:0,
				total_com:0,
				
				isLoad:false,
				isfinish:false,
				page:1,
				
				city_id:'',
				chain_id:'',
			}
		},
		created(){
			
		}, 
		mounted(){
		
		},
		watch:{
			'type_id':function(){
				this.page = 1
				this.list = []
				this.isfinish = false
				this.total = 0
				this.getList()
			}
		},
		methods:{
			changeInit(query){
				this.city_id = query?.city_id || ''
				this.chain_id = query?.chain_id || ''
				this.page = 1
				this.list = []
				this.isfinish = false
				this.total = 0
				this.getList()
			},
      clearLs() {
        sessionStorage.lsList = ''
				this.lsList = []
			},
			toPage(url){
        this.$router.push(url)
			},
      toChain(id) {
        this.$router.push({name:'chainDetail',query:{id}})
			},
      toCom(identification) {
        this.$router.push({name:'companyDetail',query:{identification}})
			},
			ss(){
				
			},
      ssLs(i) {
        console.log(i)
				this.keywords = i
				this.search()
			},
			search(){
				this.isFocus = false
				
				let index = this.lsList.findIndex(i=>i==this.keywords)
				if(index==-1&&this.keywords){
          this.lsList.unshift(this.keywords)
          sessionStorage.lsList = JSON.stringify(this.lsList)
				}else{
					this.lsList.splice(index,1)
          this.lsList.unshift(this.keywords)
          sessionStorage.lsList = JSON.stringify(this.lsList)
				}
				
				this.page = 1
				this.list = []
				this.isfinish = false
				this.total = 0
				this.getList()
			},
			getList(){
				let data ={
					keywords:this.keywords,
					page:this.page,
					...this.query
				}
				if(this.type_id=='chain'){
					company.getList(data).then(res=>{
						this.total_com = res.data.total
					})
				}
				
				let api = this.type_id == 'chain'?GetChainLevelList({
																							limit:10,
																							page:1,
																							keywords:this.keywords,
																							company_num_fag:1, 
                                              chain_num_fag: 1,
																						}):
									this.type_id == 'company'?company.getList({...data,chain_id:this.chain_id,city_id:this.city_id}):
									this.type_id == 'project'?project.getList({...data,chain_id:this.chain_id,city_id:this.city_id}):
									this.type_id == 'park'? park.getList({...data,chain_id:this.chain_id,city_id:this.city_id}):''
			
				this.isLoad = true
				api.then(res=>{
					this.isLoad = false
					this.total = res.data.total
					if(this.page==1){
						this.list = res.data.data
					}else{
						this.list.push(...res.data.data)
					}
					if(this.list.length>=this.total){
						this.isfinish = true
					}
				}).catch(err=>{
					this.isLoad = false
					this.isfinish = true
				})
			},
			getMore(){
				if(this.isfinish){
					return
				}
				this.page += 1 
				this.getList()
			},
			toDetail(i){
				let url = this.type_id =='chain'?'chainDetail':this.type_id == 'company'?'companyDetail':this.type_id == 'project'?'xxDetail':this.type_id == 'park'?'parkDetail':'newsDetail_sj'
				let ids = this.type_id =='chain'?'id':this.type_id == 'company'?'identification':'id'
        let id = this.type_id == 'chain' ? i.id : this.type_id == 'company' ? i.identification : i.id
        this.$router.push({name:url,query:{[ids]:id}})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	height: 100%;
	overflow: hidden;
}
.ss_div{
	width: 355px;
	margin: 0 auto;
	height: 44px;
	background: #F0F1F5;
	border-radius: 8px;
	position: relative;
	.ss_input{
		font-size: 15px;
    border: none;
    background: #0000;
    padding-left: 10px;
	}
}
.ss_btn{
	position: absolute;
	color: #FFFFFF;
	top:3px;
	right:4px;
	width: 55px;
	height: 38px;
  background: linear-gradient(128deg, #FA871E, #FDAC62);
	border-radius: 8px;
	z-index: 10;
}


.swiper_div{
  margin: 10px;
  position: relative;
}
.main_div{
  height: 500px !important;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E6E6E6;
}

.s_top{
	width:230px;
	height:33px;
	.s_top_img{
		width: 100%;
		height: 33px;
		position: absolute;
    top: 0;
    left: 0;
	}
	.s_top_ddd{
		position: relative;
		z-index: 2;
		font-weight: bold;
		font-size: 15px;
		color: #333333;
	}
	.s_top_icon{
		width: 15px;
		height: 15px;
		margin-right: 10px;
		margin-left: 10px;
	}
}

.rank_div{
	width: 18px;
	height: 18px;
	margin: 15px 0;
	margin-right: 5px;
	margin-left: 10px;
	line-height: 18px;
	text-align: center;
	font-size: 14px;
	color: #999999;
	img{
		height: 100%;
		width: 100%;
	}
}
.rank_name{
	font-size: 14px;
	color: #333333;
}

.ss_text{
	font-weight: bold;
	font-size: 15px;
	color: #333333;
}
.ss_ddd{
	margin: 0 10px;
}

.ls_item{
	height: 28px;
	background: #F5F6F7;
	border-radius: 3px;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 13px;
	color: #333333;
	padding: 0 10px;
	line-height: 28px;
}

.jg_div{
	position: relative;
	background: #F5F5F5;
	height: calc(100% - 108px);
	overflow: auto;
}
.jg_div1{
	height: calc(100% - 140px);
}
.jg_type{
	// position: sticky;
	// top: 0;
	position: relative;
	top:-5px;
	margin: 0 10px;
	background: #fff;
	height: 25px;
	.type_item{
		font-size: 15px;
		color: #000000;
		margin-right: 30px;
		padding-bottom: 6px;
	}
	.type_item_a{
		color: #FA8A26;
		font-weight: bold;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 3px;
			border-radius: 2px;
			background: #FA8A26;
		}
	}
}
.list{
  height: calc(100% - 40px)
}
.jg_list{
	width: 100%;
	background: #F5F5F5;
}

	
.btn_btn{
  margin: 20px auto;
  width: 100px;
  height: 35px;
  line-height: 35px;
  background: linear-gradient(-62deg, #FA8A26, #FA8A26cc);
  border-radius: 3px;
  font-size: 15px;
  color: #FFFFFF;
  text-align: center;
}

.total{
  margin-left: 10px;
  font-size: 11px;
  color: #333333;
  background: #F5F5F5;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 5px;
}
</style>
